<template>
	<view style="background-color: #333333;height: 100%;position: relative;">
		<u-navbar :title="$t('base.f50')"></u-navbar>
		<view id="top_div">
			<view>
				<text>{{$t('base.f50')}}</text>
			</view>
			<view>
				<view id="money_total_div">
					<!-- <text id="total_amount">{{totalAmount}}</text> -->
					<text style="font-size: 30rpx;">USDT</text>
				</view>
			</view>
			<view id="top_btm_3_div">
				<view class="wk_item_btm_item_div">
					<text class="color_gray">{{$t('base.f21')}}</text>
					<text>{{parseFloat(item.amount)}}</text>
				</view>
				<view class="wk_item_btm_item_div">
					<text class="color_gray">{{$t('base.f22')}}</text>
					<text>{{parseFloat(item.annualized_rate)}}%</text>
				</view>
				<view class="wk_item_btm_item_div">
					<text class="color_gray">{{$t('base.f23')}}</text>
					<!-- <text>{{item.day}}({{$t('base.f12')}})</text> -->
					<text>{{item.cycle}}</text>
				</view>
			</view>

		</view>

		<view class="top_2_div">

			<view class="top_2_item_div">
				<view class="txt_gray">{{$t('base.f51')}}</view>
				<view class="txt_gold_bold">{{$t('base.f52')}}</view>
			</view>

			<view class="top_2_item_div">
				<view class="txt_gray">{{$t('base.f53')}}</view>
				<view class="txt_gold_bold">{{$t('base.f54')}}</view>
			</view>

		</view>

		<view class="top_3_div">

			<view class="txt_gray">存币数量</view>

			<view class="et_div">
				<input id="et_buy_num" type="number" maxlength="20" v-model="buy_num" />
				<view id="btn_all" @click="onAll">{{$t('base.f55')}}</view>
			</view>

			<view class="top_2_item_div">
				<view class="txt_gray">{{$t('base.f56')}}</view>
				<view class="txt_gold_bold">{{yuji || 0}}</view>
			</view>

			<view class="top_2_item_div">
				<view class="txt_gray">{{$t('base.f57')}}</view>
				<view class="txt_gold_bold">{{keyong || 0}}</view>
			</view>

		</view>

		<view id="btn_ok_div">
			<view id="btn_ok" @click="onOk">{{$t('base.f58')}}</view>
		</view>

	</view>
</template>

<script>
	import Wallet from "@/api/wallet";
	import Wk from "@/api/a_wk";
	export default {
		data() {
			return {
				item: {}, // 准备购买的币种
				buy_num: '', // 记录购买数量
				keyong: '', // 记录可用资产
				fundList: [], // 所有资产列表
			}
		},
		computed: {
			// 计算预计收益 [ 保留几位小数 .toFixed(6) ]
			yuji() {
				if (this.item && this.item.annualized_rate && this.buy_num) {
					return parseFloat(this.buy_num * this.item.annualized_rate / 100.0)
				}
				return 0
			}
		},
		mounted() {
			const item = uni.getStorageSync('lock')
			// console.log('锁仓页面收到的数据 = ', item);
			this.item = item

			this.getFundList()
		},
		methods: {
			onAll() {
				// uni.showToast({ title: '全部币币', icon: 'none' })
				this.buy_num = this.keyong
			},
			onOk() {
				// uni.showToast({ title: '认购', icon: 'none' })
				if (!this.buy_num) {
					uni.showToast({ title: '请输入存币数量', icon: 'none' })
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认提交订单?',
					success: r => {
						if (r.confirm) {
							let prm = { id: this.item.id, amount: this.buy_num }
							this.postMachineBuy(prm)
						}
					}
				})
			},
			getFundList() {
				Wallet.fundAccount().then(res => {
					// console.log('getFundList.res = ', res);
					this.fundList = res.data.list
					if (this.item && this.item.coin_id && this.fundList) {
						let tmpFundArr = this.fundList.filter((fund, index) => fund.coin_id == this.item.coin_id)
						// console.log('筛选出来的数据tmpFundArr = ',tmpFundArr);
						this.keyong = tmpFundArr[0].usable_balance
						// console.log('可用 = ', this.keyong);
					}
				});
			},
			postMachineBuy(prm) {
				Wk.postMachineBuy(prm).then(res => {
					// console.log('postMachineBuy.res = ', res);
					if (res.code == 200) {
						uni.showModal({
							title: '提示',
							content: '购买成功',
							showCancel: false,
							success(r) {
								if (r.confirm) {
									// uni.navigateBack()
									uni.navigateTo({ url: '/pages/a_wk/wk_buy_list' })
								}
							}
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.color_gray {
		color: #A6A6A6;
		margin: 0 0 4rpx 0;
	}

	#top_div {
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: #FFE3C1;
		margin: 24rpx;
		padding: 24rpx;
		border-radius: 24rpx;
	}

	#money_total_div {
		margin: 24rpx 0 0 0;
	}

	#total_amount {
		font-size: 44rpx;
		margin: 0 24rpx 0 0;
	}

	#top_btm_3_div {
		display: flex;
		justify-content: space-between;
		margin: 48rpx 0 0 0;
	}

	.top_btm_item_div {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#btn_weituo {
		position: fixed;
		right: 48rpx;
		font-size: 24rpx;
		color: #D3DCC2;
		background-color: #604D29;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
	}

	.btn_suocang {
		background-color: #FFDDB3;
		padding: 6rpx 24rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.wk_item_btm_div {
		display: flex;
		justify-content: space-between;
		margin: 24rpx 0 0 0;
	}

	.wk_item_btm_item_div {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.top_2_div {
		display: flex;
		flex-direction: column;
		background-color: #4D4D4D;
		margin: 24rpx;
		padding: 24rpx;
		border-radius: 24rpx;
	}

	.top_2_item_div {
		display: flex;
		justify-content: space-between;
	}

	.txt_gray {
		color: #A6A6A6;
		line-height: 58rpx;
	}

	.txt_gold_bold {
		color: #D4BA83;
		font-weight: bold;
		line-height: 58rpx;
	}

	.top_3_div {
		display: flex;
		flex-direction: column;
		background-color: #4D4D4D;
		margin: 24rpx;
		padding: 24rpx;
		border-radius: 24rpx;
	}

	.et_div {
		display: flex;
		border: solid 1rpx #A6A6A6;
		border-radius: 8rpx;
		align-items: center;
		margin: 12rpx 0;
	}

	#et_buy_num {
		padding: 10rpx 24rpx;
		color: white;
		font-weight: bold;
		// text-align: right;
		flex-grow: 1;
	}

	#btn_all {
		font-size: 24rpx;
		color: white;
		background-color: #D4BA83;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		margin: 0 12rpx 0 0;
	}

	#btn_ok_div {
		position: absolute;
		bottom: 24rpx;
		width: 100%;
	}

	#btn_ok {
		margin: 0 24rpx 0 24rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		color: white;
		background-color: #D4BA83;
		border-radius: 8rpx;
	}
</style>